<!-- 发布主题 -->
<template>
    <div class="w-full bg-white rounded-[1.25rem] pt-[1.25rem] mb-[1.5rem]">
        <div 
            class="flex items-center flex-start gap-[0.5rem] bg-[#f8f9fa] rounded-[1.25rem] p-[1.25rem] mx-[1.25rem] cursor-pointer"
            @click="openPublishDialog()"
        >
            <img :src="userStore.avatar" class="w-[1.875rem] h-[1.875rem] rounded-[50%]" alt="">
            <div class="text-[0.875rem] text-[#8b8e9d] ml-[0.625rem]">点击发表主题...</div>
        </div>
        <div class="mx-[1.25rem] w-full h-[3.75rem] flex items-center">
            <div 
                :title="item.title" 
                v-for="item in iconList" 
                :key="item.id" 
                class="flex items-center mr-[1.5rem] cursor-pointer"
                @click="openPublishDialog(item)"
            >
                <img class="w-[1.125rem] h-[1.125rem]" :src="item.icon" alt="">
            </div>
            
            <div 
                class="cursor-pointer text-[0.75rem] text-[#8b8e9d] font-bold flex items-center gap-[0.25rem]" 
                @click="handleCreateClick"
            >
                <img class="w-[0.75rem] h-[0.75rem]" src="/public/icon/publish-topic/write.svg" alt="">
                写文章
            </div>
        </div>
    </div>
    
    <!-- 发布主题弹窗 -->
    <PublishDialog ref="publishDialogRef" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useUserStore } from '@/stores/user'
import PublishDialog from '@/views/Forum/create/PublishDialog.vue'

const userStore = useUserStore()
const publishDialogRef = ref<any>(null)

const iconList = ref([ 
    {
        id: 1,
        icon: '/public/icon/publish-topic/expression.svg',
        title: '添加表情',
        action: 'emoji'
    },
    {
        id: 2,
        icon: '/public/icon/publish-topic/image.svg',
        title: '添加图片',
        action: 'image'
    },
    {
        id: 3,
        icon: '/public/icon/publish-topic/file.svg',
        title: '添加文件',
        action: 'file'
    },
    {
        id: 4,
        icon: '/public/icon/publish-topic/bold.svg',
        title: '加粗',
        action: 'bold'
    },
    {
        id: 5,
        icon: '/public/icon/publish-topic/hashsign.svg',
        title: '添加话题',
        action: 'topic'
    },
    {
        id: 6,
        icon: '/public/icon/publish-topic/scheduled.svg',
        title: '定时发布',
        action: 'schedule'
    }
])

// 打开发布弹窗
const openPublishDialog = (item?: any) => {
    if (!publishDialogRef.value) return
    
    const options: any = {}
    
    // 如果是点击工具按钮，则设置激活的工具
    if (item && item.action) {
        options.activeTool = item.action
    }
    
    publishDialogRef.value.openDialog(options)
}

// 旧的处理函数，现在改为打开弹窗
const handleCreateClick = () => {
    window.open('/forum/create', '_blank')
}
</script>
<style scoped lang="scss">

</style>